<template>
  <div class="app-container" v-loading.body="listLoading">
    <h1 style="padding-left: 50px;margin-bottom: 50px">{{page_tit[page_status]}}</h1>
    <el-form ref="form" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="10" :offset="0">
          <el-form-item label="编辑类型" v-if="page_status === 'edit'">
            <el-radio class="radio" v-model="edit_status" label="once">单节课程</el-radio>
            <el-radio class="radio" v-model="edit_status" label="all" disabled>整个计划</el-radio>
          </el-form-item>
          <el-form-item label="团课名称" style="width: 305px">
            <el-input v-model="form.name" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="教练名称">
            <el-select v-model="form.coach_uuid" placeholder="请选择">
              <el-option
                v-for="item in coach"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.coach_uuid">{{errors.coach_uuid ? errors.coach_uuid[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="课室名称">
            <el-select v-model="form.classroom_id" placeholder="请选择" @change="classroomChange">
              <el-option
                v-for="item in classroom.label"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.classroom_id">{{errors.classroom_id ? errors.classroom_id[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="课程选择">
            <el-select v-model="form.course_id" placeholder="请选择" @change="courseChange">
              <el-option
                v-for="item in course"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.course_id">{{errors.course_id ? errors.course_id[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="上课日期" v-if="page_status !== 'day_create'">
            <el-col :span="9" style="padding-left: 0">
              <el-date-picker type="date" placeholder="开始日期" v-model="start_date" style="width: 100%;" value-format="yyyy-MM-dd"
                              @change="dateStartChange"
              ></el-date-picker>
            </el-col>
            <el-col :span="9" style="padding-left: 0">
              <el-date-picker type="date" placeholder="结束日期" v-model="end_date" style="width: 100%;" value-format="yyyy-MM-dd"
                              @change="dateEndChange"
              ></el-date-picker>
            </el-col>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.start_date">{{errors.start_date ? errors.start_date[0] : ''}}</div>
            </transition>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.end_date">{{errors.end_date ? errors.end_date[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="上课时间">
            <el-time-select
              placeholder="起始时间"
              v-model="form.start_time"
              :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
              }"
            >
            </el-time-select>
            <el-time-select
              placeholder="结束时间"
              v-model="form.end_time"
              :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: form.start_time
            }">
            </el-time-select>
           <transition name="el-zoom-in-top">
             <div class="el-form-item__error" v-if="errors.start_time || errors.end_time">
               {{errors.start_time ? errors.start_time[0] : ''}}  {{errors.end_time ? errors.end_time[0] : ''}}
              </div>
           </transition>
          </el-form-item>
          <!--<el-form-item label="开始预约">-->
            <!--<el-col :span="3">-->
              <!--<el-switch v-model="value1" on-text="" off-text=""></el-switch>-->
            <!--</el-col>-->
            <!--<el-col :span="10">-->
              <!--<el-input>-->
                <!--<el-select slot="append" style="width: 80px" v-model="order_type">-->
                  <!--<el-option label="天" value="day"></el-option>-->
                  <!--<el-option label="小时" value="hour"></el-option>-->
                <!--</el-select>-->
              <!--</el-input>-->
            <!--</el-col>-->
            <!--<transition name="el-zoom-in-top">-->
              <!--<div class="el-form-item__error" v-if="errors.classroom_id">{{errors.classroom_id ? errors.classroom_id[0] : ''}}</div>-->
            <!--</transition>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="提前预约" style="width: 305px">-->
            <!--<el-input>-->
              <!--<el-select slot="append" style="width: 80px" v-model="order_type">-->
                <!--<el-option label="天" value="day"></el-option>-->
                <!--<el-option label="小时" value="hour"></el-option>-->
              <!--</el-select>-->
            <!--</el-input>-->
            <!--<transition name="el-zoom-in-top">-->
              <!--<div class="el-form-item__error" v-if="errors.classroom_id">{{errors.classroom_id ? errors.classroom_id[0] : ''}}</div>-->
            <!--</transition>-->
          <!--</el-form-item>-->
          <template v-if="page_status === 'create' || (page_status === 'edit' && edit_status === 'all')">
            <el-form-item label="团课类型">
              <el-select v-model="form.frequency" placeholder="请选择">
                <el-option
                  v-for="item in frequency"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <transition name="el-zoom-in-top">
                <div class="el-form-item__error" v-if="errors.frequency">{{errors.frequency ? errors.frequency[0] : ''}}</div>
              </transition>
            </el-form-item>
            <el-form-item label="每周几上课">
              <el-checkbox-group v-model="form.by_day">
                <el-checkbox label="MO" name="by_day">周一</el-checkbox>
                <el-checkbox label="TU" name="by_day">周二</el-checkbox>
                <el-checkbox label="WE" name="by_day">周三</el-checkbox>
                <el-checkbox label="TH" name="by_day">周四</el-checkbox>
                <el-checkbox label="FR" name="by_day">周五</el-checkbox>
                <el-checkbox label="SA" name="by_day">周六</el-checkbox>
                <el-checkbox label="SU" name="by_day">周日</el-checkbox>
              </el-checkbox-group>
              <transition name="el-zoom-in-top">
                <div class="el-form-item__error" v-if="errors.by_day">{{errors.by_day ? errors.by_day[0] : ''}}</div>
              </transition>
            </el-form-item>
          </template>
        </el-col>
        <el-col :span="10" :offset="1">
          <h3 style="margin-bottom: 30px;padding-left: 100px;margin-top: 0px">上课座位设定</h3>
          <!--<el-form-item label="座位设定">-->
            <!--<el-col :span="9" style="padding-left: 0">-->
              <!--<el-input-number v-model="form.seat_row"  :min="1" :max="10"></el-input-number>-->
            <!--</el-col>-->
            <!--<el-col :span="9" style="padding-left: 0">-->
              <!--<el-input-number v-model="form.seat_col"  :min="1" :max="10"></el-input-number>-->
            <!--</el-col>-->
          <!--</el-form-item>-->
          <seat-selection ref="seats"
            :data="form.seat_info"
            @clickSeat="clickSeat">
          </seat-selection>
        </el-col>
      </el-row>
      <el-row style="margin-top: 100px">
        <el-col :span="10" :offset="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">提交</el-button>
            <el-button @click="resetForm()" v-if="page_status === 'edit'">重置</el-button>
            <el-button type="primary" @click="back">返回上一页</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import _ from 'lodash'
import SeatSelection from '@/components/SeatSelection'
import { GetSchdules, CreateSchdules, GetOneSchdulesCourse, postOnceSchdulesCourse } from '@/api/schedule'
import ElFormItem from '../../../node_modules/element-ui/packages/form/src/form-item'

export default {
  components: {
    ElFormItem, SeatSelection
  },
  data() {
    return {
      value1: true,
      order_type: 'day',
      free_status: true,
      edit_status: 'once',
      page_tit: {
        'edit': '编辑团课',
        'create': '添加团课',
        'day_create': `添加团课 (${this.$route.query.date})`
      },
      listLoading: false,
      page_status: 'create',
      seats: [],
      start_date: '',
      end_date: '',
      errors: {},
      form: {
        seat_num: null,
        seat_row: null,
        seat_col: null,
        coach_uuid: null,
        course_id: null,
        classroom_id: null,
        frequency: 'WEEKLY',
        is_all_day: '0',
        start_date: null,
        end_date: null,
        start_time: null,
        end_time: null,
        by_day: [],
        name: null,
        seat_info: []
      },
      coach: [],
      classroom: [],
      course: [],
      frequency: [{
        value: 'WEEKLY',
        label: '按月'
      }]
    }
  },
  created() {
    this.createdRun()
    if (this.$route.query.date) this.page_status = 'day_create'
  },
  watch: {
    page_status(page_status) {
      if (page_status === 'day_create') {
        this.form.start_date = this.$route.query.date
        this.form.end_date = this.$route.query.date
        this.by_day = []
      }
    }
  },
  methods: {
    back() { this.$router.back(-1) },
    dateStartChange(v) { this.form.start_date = v },
    dateEndChange(v) { this.form.end_date = v },
    onSubmit() {
      if (this.page_status === 'edit') {
        this.listLoading = true
        const data = this.form
        if (this.edit_status === 'once') {
          _.unset(data, 'by_day')
          _.unset(data, 'frequency')
          postOnceSchdulesCourse(this.$route.query.id, data).then(res => {
            this.$message({ message: '保存成功', type: 'success' })
            this.listLoading = false
          }).catch(error => {
            const { response } = error
            this.errors = response.data.errors
            this.listLoading = false
          })
        } else {
          postOnceSchdulesCourse(this.$route.query.id, data).then(res => {
            this.$message({ message: '保存成功', type: 'success' })
            this.listLoading = false
          }).catch(error => {
            const { response } = error
            this.errors = response.data.errors
            this.listLoading = false
          })
        }
      } else {
        this.listLoading = true
        if (this.page_status === 'day_create') this.form.frequency = 'NONE'
        CreateSchdules(this.form).then(res => {
          this.$message({ message: '保存成功', type: 'success' })
          this.listLoading = false
        }).catch(error => {
          const { response } = error
          this.errors = response.data.errors
          this.listLoading = false
        })
      }
    },
    clickSeat(seat, seats) {
      //         更改座位状态
      // ['disabled' => 禁用, 'empty' => 空, 'booked' => 已经被定, 'selected' => 选中,]

      if (seat.disabled && seat.status !== 'disabled') return
      let setStatus
      if (seat.status === 'empty') {
        setStatus = 'disabled'
        this.form.seat_num -= 1
      }
      if (seat.status === 'disabled') {
        setStatus = 'empty'
        this.form.seat_num += 1
      }
      this.$refs.seats.setSeatStatus(seat, setStatus)
      this.$refs.seats.toggleSeatDisable(seat)
      this.form.seat_info = seats
    },
    classroomChange(value) {
      console.info('classroomChange', this.free_status)
      if (this.free_status) {
        const classroom = this.classroom.data[value]
        this.form.seat_info = classroom.seat_info
        this.form.seat_num = classroom.seat_num
        this.form.seat_col = classroom.seat_col
        this.form.seat_row = classroom.seat_row
      }
    },
    courseChange(value) {
      let option = {}
      option = this.course.find((item) => item.value === value)
      if (this.form.name === null || this.form.name === '') this.form.name = option.label
    },
    pubilcLoad() {
      this.listLoading = true
      return GetSchdules().then(res => {
        // coach
        const coach = []
        for (const index in res.coach.data) {
          coach[index] = {
            value: res.coach.data[index].uuid,
            label: res.coach.data[index].realname
          }
          this.coach = coach

          // schedule
          const course = []
          for (const index in res.course.data) {
            course[index] = {
              value: res.course.data[index].id,
              label: res.course.data[index].name
            }
            this.course = course
          }

          // classroom
          const classroom = []
          const data = {}
          for (const index in res.classroom.data) {
            classroom[index] = {
              value: res.classroom.data[index].id,
              label: res.classroom.data[index].name
            }
            data[res.classroom.data[index].id] = res.classroom.data[index]
            this.classroom.label = classroom
            this.classroom.data = data
          }
        }
        this.listLoading = false
      })
    },
    resetForm() {
      this.createdRun()
    },
    createdRun() {
      this.pubilcLoad().then(() => {
        if (this.$route.query.id) {
          this.page_status = 'edit'
          if (this.edit_status === 'once') {
            GetOneSchdulesCourse(this.$route.query.id).then(res => {
              this.free_status = false
              const r = res.data
              this.start_date = r.start_date
              this.end_date = r.end_date
              this.form.name = r.name
              this.form.course_id = r.course.data.id
              this.form.coach_uuid = r.coach.data.uuid
              this.form.classroom_id = r.classroom.data.id
              this.form.end_time = r.end_time
              this.form.start_time = r.start_time
              this.form.seat_info = r.seat_info
              this.form.seat_num = r.seat_num
              this.form.seat_row = r.seat_row
              this.form.seat_col = r.seat_col
            }).then(() => {
              this.free_status = true
            })
          }
        }
      })
    }
  }
}
</script>
